<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页面-订单管理</title>
    <style>
        .el-header {
            background-color: rgba(63, 157, 254, 0.99);
            color: #333;
            line-height: 90px;
        }
        .el-aside {
            color: rgb(238, 241, 246)
        }
        .el-main{

        }
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .upload-demo .el-upload:hover {
            border-color: #409EFF;
        }
        .upload-demo .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            height: 200px !important;
            width: 200px !important;
        }
        .avatar {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            height: 200px !important;
            width: 200px !important;
        }
        .a1{
            display: flex;
            justify-content: center;!important;
            align-items: center;!important;
            margin-top: 25px;
        }
        .el-card /deep/ .el-card__header{
            height: 60px;!important;
        }
    </style>
</head>
<body>
<div id="app">
    <!--顶部信息栏-->
    <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
    <el-row>
        <el-col :span="6">
            <img src="../img/logo.png" height="100" width="250" style="text-align:left;margin-left: -20px">
        </el-col>
        <el-col :span="12">
            <span class="a1" style="color:#2e2e2f;font-size:40px;">淘书网后台管理</span>
        </el-col>
        <el-col :span="6">
            <el-button type="text" style="color: #666;position: absolute; bottom: 10px;right:10px;" @click="killSession">退出登录</el-button>
            <span style="color: #666;font-size:15px;float: right;margin-top:20px">管理员:{{Admin.adminName}}</span>
        </el-col>
    </el-row>
    <hr style="border-width: 3px;background-color: rgba(63,157,254,0.96);border-color: rgba(63,157,254,0.96);border-style: solid">
    <el-container style=" border: 0px solid #eee">
        <!--左侧导航栏-->
        <el-aside width="250px" style="background-color: rgb(253,253,254);">
            <el-col style="width:250px">
                <el-menu
                        default-active="3"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item index="1" @click="jumpToBookManage">
                        <i class="el-icon-reading" index="1" style="font-size:20px"></i>
                        <span slot="title"style="font-size:20px">图书管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="jumpToUserManage">
                        <i class="el-icon-user" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="jumpToOrdersManage">
                        <i class="el-icon-document" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="jumpToCategoryManage">
                        <i class="el-icon-menu" style="font-size:20px"></i>
                        <span slot="title" style="font-size:20px">分类管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                    <el-menu-item index="4" ></el-menu-item>
                </el-menu>
            </el-col>
        </el-aside>
        <template>
            <el-dialog
                    title="订单详情"
                    :visible.sync="detailsVisible"
                    width="40%"
                    :close-on-click-modal="false"
                    @close="resent"
            >
                <div style="margin-top: -10px;font-size: 17px;margin-bottom: 20px">
                    <el-card class="box-card" style="width: auto;">
                        <div slot="header" class="clearfix" >
                            <el-col :span=12><span>收件人：{{addressee.name}}</span></el-col>
                            <el-col :span="12"><span>手机号码：{{addressee.tel}}</span></el-col>
                            <br>
                        </div>

                        <el-row><span>收货地址：{{addressee.address}}</span></el-row>
                    </el-card>
                </div>
                <el-table :data="ordersItems" border stripe width="40" style="margin-top: 10px">
                    <el-table-column align="center" type="index" label="ID"></el-table-column>
                    <el-table-column label="图片" >
                        <template slot-scope="scope">
                            <el-image style="width: 100px;height: 110px" :src="scope.row.bookImg"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bookName" label="书名" ></el-table-column>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        le-column>
                    <el-table-column prop="bookPrice" label="单价" ></el-table-column>
                    <el-table-column prop="quantity" label="购买数量">
                        <template v-slot="scope">
                            <span style="color:orangered">{{scope.row.quantity}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </template>
        <el-main>
            <!--搜索表单-->
            <el-form ref="searchForm" :inline="true" :model="searchDialog" class="demo-form-inline" >
                <el-row style="width: auto">
                    <el-form-item label="订单状态:">
                        <el-select v-model="searchDialog.status" placeholder="Status" style="width: 130.77px">
                            <el-option label="待付款"  value="未付款"></el-option>
                            <el-option label="已付款"  value="待发货"></el-option>
                            <el-option label="已发货"  value="运输中"></el-option>
                            <el-option label="已完成"  value="已签收"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单编号:" style="margin-left: 15px">
                        <el-input v-model="searchDialog.no" placeholder="No" style="width: auto"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名:" style="margin-left: 15px">
                        <el-input v-model="searchDialog.username" placeholder="Username" style="width: 163.77px"></el-input>
                    </el-form-item>
                    <el-form-item label="订单名称:" style="margin-left: 15px">
                        <el-input v-model="searchDialog.name" placeholder="Name" style="width: 163.77px"></el-input>
                    </el-form-item>

                </el-row>
                <el-row>
                    <el-form-item label="创建时间:">
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="最远日期" v-model="searchDialog.createDate1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" align="center"style="font-size: 20px" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker placeholder="最近日期" v-model="searchDialog.createDate2" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="付款时间:"  style="margin-left: -100px">
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="最远日期" v-model="searchDialog.payDate1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" align="center"style="font-size: 20px" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker placeholder="最近日期" v-model="searchDialog.payDate2" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit" style="margin-left: -90px">搜索</el-button>
                    </el-form-item>
                    <el-form-item label="发货时间:" >
                        <el-col :span="8">
                            <el-date-picker type="date" placeholder="最远日期" v-model="searchDialog.deliveryDate1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" align="center"style="font-size: 20px" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker placeholder="最近日期" v-model="searchDialog.deliveryDate2" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="签收时间:" style="margin-left: -100px">
                        <el-col  :span="8">
                            <el-date-picker type="date" placeholder="最远日期" v-model="searchDialog.signDate1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" align="center"style="font-size: 20px" :span="2">-</el-col>
                        <el-col :span="8">
                            <el-date-picker placeholder="最近日期" v-model="searchDialog.signDate2" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-refresh" @click="resetSearch"  style="margin-left: -90px">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <!--表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            type="index">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="no"
                            :show-overflow-tooltip="true"
                            label="订单编号">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="name"
                            label="订单名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="username"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="totalPrice"
                            label="总金额">
                        <template v-slot="scope">
                            <span style="color:orangered">￥{{scope.row.totalPrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" align="center" width="280" >
                        <template v-slot="scope">
                            <div style="text-align: left;margin-left: 20px">
                                <span>创建时间：{{scope.row.creatTime}}</span><br>
                                <span>付款时间：{{scope.row.payTime}}</span><br>
                                <span>发货时间：{{scope.row.deliveryTime}}</span><br>
                                <span>签收时间：{{scope.row.signTime}}</span><br>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="订单状态"
                            align="center"
                            style="color: red">
                        <template v-slot="scope">
                            <span v-if="scope.row.status==='未付款'" style="color: #e5181d">待付款</span>
                            <span v-if="scope.row.status==='待发货'" style="color: #faa024">已付款</span>
                            <span v-if="scope.row.status==='运输中'" style="color: rgba(30,121,224,0.99)">已发货</span>
                            <span v-if="scope.row.status==='已签收'" style="color: #63e518">已完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作"
                            width="250px"
                    >
                        <template slot-scope="scope">
                            <el-button style="color: #3a8ee6" @click="showOrdersDetails(scope.row.id)">订单详情</el-button>
                            <el-button :disabled="whetherPaid(scope.row.status)" type="danger" @click="delivery(scope.row.id)">发货</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!--分页工具条-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount"

            >
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

<<script>
    new Vue({
        el: '#app',
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据
            this.loading=false;
            this.selectByPageAndCondition();
            this.getAdmin();
        },
        methods: {
            whetherPaid(status){
                if (status =="待发货"){
                    return false;
                }
                return true;
            },
            getAdmin(){
                axios({
                    method:"get",
                    url:"/admin",
                }).then(resp =>{
                    this.Admin = resp.data;
                    console.log(this.Admin);
                    if (this.Admin!== null && this.Admin !== ""&& this.Admin !==undefined) {

                    }else{this.Admin={adminName:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送ajax请求
                    axios.get("/admin/logout").then((res) => {
                    })
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                    window.location.href = "/login_page/login.html"
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            delivery(val){
                this.$confirm('是否确认发货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "get",
                        url: "/orders/status?ordersId=" + val + "&type=delivery",
                    }).then((res) => {
                        if (res.data.code==1){
                            this.selectByPageAndCondition();
                        }
                    })
                    this.$message({
                        message: '发货成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发货'
                    });
                });
            },
            showOrdersDetails(val){
                let id = val;
                var _this=this;
                this.detailsVisible=true;
                axios({
                    method: "get",
                    url: "/orders/detail?ordersId=" + id,
                }).then((res) => {
                    this.ordersItems = res.data.data;
                });
                axios({
                    method: "get",
                    url: "/orders/address?ordersId=" + id,
                }).then((res) => {
                    if (res.data.code == 1) {
                        this.addressee = res.data.data;
                    }
                })
            },
            //查询搜索条件内容
            selectByPageAndCondition() {
                var _this = this;
                axios({
                    method: "post",
                    url: "/orders/page?currentPage="
                        + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.searchDialog
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData = resp.data.items;
                    //设置表格总记录数
                    _this.totalCount = resp.data.totalCount;
                })
            },
            //重置搜索框
            resetSearch() {
                this.searchDialog = {
                    no:'',
                    username: '',
                    name:'',
                    createDate1:'',
                    createDate2:'',
                    payDate1:'',
                    payDate2:'',
                    deliveryDate1:'',
                    deliveryDate2:'',
                    signDate1:'',
                    signDate2:'',
                };
                // this.$refs["form"].resetFields();不知道为什么，走到这里无效
                this.selectByPageAndCondition();
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectByPageAndCondition();
                // console.log(`每页 ${val} 条`);
            },
            //当前页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectByPageAndCondition();
                // console.log(`当前页: ${val}`);
            },
            resent(){
                this.addressee={};
            },
            //查询方法
            onSubmit() {
                console.log(this.searchDialog);
                this.currentPage = 1;//每次查询回到页码到第一页
                this.selectByPageAndCondition();
            },
            jumpToBookManage(){
                location.href ="bookManage.html";
            },
            jumpToUserManage(){
                location.href ="userManage.html"
            },
            jumpToOrdersManage(){
                location.href ="ordersManage.html"
            },
            jumpToCategoryManage(){
                location.href = "categoryManage.html"
            },
        },
        data() {
            return {
                //标签栏显示在”左侧“
                tabPosition: 'left',
                //当前页码
                currentPage: 1,
                // 每页显示的条数
                pageSize:5,
                // 总记录数
                totalCount:100,
                //选中id
                selectId:'',
                //管理员信息
                Admin:[],
                detailsVisible:false,
                //搜索框数据接受
                searchDialog: {
                    no:'',
                    username: '',
                    name:'',
                    createDate1:'',
                    createDate2:'',
                    payDate1:'',
                    payDate2:'',
                    deliveryDate1:'',
                    deliveryDate2:'',
                    signDate1:'',
                    signDate2:'',
                },
                //表格初始化
                tableData: [{
                }],
                addressee:{},
                ordersItems:[],
            }
        }
    })
</script>
</body>
</html>